<template>
  <SysHeader />
  <!-- eslint-disable-next-line -->
  <div class="searchdiv">
    <el-container>
      <el-aside class="searchaside">
        <el-menu :default-active="searchtype" class="searchtype">
          <el-menu-item class="search0house" index="0">
            <el-icon><House /></el-icon>
            <span>仓库</span>
          </el-menu-item>

          <!-- <el-menu-item class="searchissue" index="2">
            <el-icon><ChatSquare /></el-icon>
            <span>工单</span>
          </el-menu-item> -->
          <!-- <el-menu-item class="search1house" index="1">
            <el-icon><House /></el-icon>
            <span>私有仓库</span>
          </el-menu-item> -->
        </el-menu>
        <div style="margin-top: 20px; font-size: 20px">
          <el-icon style="color: red"><Flag /></el-icon>热门悬赏
        </div>

        <!--走马灯-->
        <div style="width: 250px; margin-top: 20px; margin-left: 10px;border-radius: 10px;">
          <img src="..\assets\热门悬赏.jpg" alt="" style="z-index:0;width: 250px;position: absolute;">
          <el-carousel
            initial-index="1"
            :autoplay="true"
            height="250px"
            interval="2000"
            arrow="always"
            indicator-position="outside"
            trigger="click"
            v-if="hotIssues != null"
            style="overflow: hidden; border-radius: 5px"
            pause-on-hover
          >
            <!-- eslint-disable-next-line -->
            <el-carousel-item v-for="item in hotIssues" @click="toHouse(item)">
              <el-card class="hotIssueCard" shadow="never">
                <div>
                  <el-icon><View /></el-icon>
                  <b>
                    <font color="red">标题：{{ item.issue.name }}</font>
                  </b>
                </div>

                <div>
                  <el-icon><House /></el-icon>
                  <font color="black">
                    仓库
                    {{ item.house.housename }}
                  </font>
                </div>
                <div>
                  <el-icon><User /></el-icon>
                  <font color="black">
                    发布人
                    {{ item.issue.creatorName }}
                  </font>
                </div>

                <div>
                  <el-icon><Money /></el-icon>
                  金额
                  <el-tag
                    effect="dark"
                    size="medium"
                    type="danger"
                    style="font-size: 15px"
                  >
                    {{ item.issue.money }}
                  </el-tag>
                </div>

                <div>
                  <el-icon><Reading /></el-icon>
                  <font color="black" size="1px">
                    创建时间
                    {{ item.issue.createTime }}
                  </font>
                </div>
                <div>
                  <el-icon><Reading /></el-icon>
                  <font color="black">
                    内容
                    {{ item.issue.content }}
                  </font>
                </div>
              </el-card>
            </el-carousel-item>

            <!-- <div >
              
            </div> -->
          </el-carousel>
        </div>
        <!--走马灯-->
      </el-aside>
      <el-main class="searchmain">
        <div class="searchinputdiv">
          <el-input
            v-on:keyup.enter="handlesearch"
            v-model="what"
            placeholder="搜索"
            class="searchinput"
          />
          <el-icon size="30px" id="searchbutton" @click="handlesearch"
            ><Position
          /></el-icon>
        </div>
        <div v-if="housedatas.length == 0">
          <el-empty style="height: 500px" description="没有找到哦" />
        </div>
        <div class="searchshow" v-else>
          <div v-if="searchtype == 1" class="houseshowdiv">
            <!-- eslint-disable-next-line -->
            <div
              v-for="housedata in housedatas"
              class="housecarddiv"
              @click="viewhouse(housedata)"
            >
              <el-card class="housecard" shadow="hover" style="cursor: pointer">
                <div class="housename" style="font-weight: 700">
                  {{ housedata.housename }}
                </div>
                <div
                  class="informationhouse"
                  style="
                    display: flex;
                    justify-content: space-between;
                    width: auto;
                  "
                >
                  <div class="creatortype">
                    <div class="housecreator">
                      <el-icon color="coral"><UserFilled /></el-icon
                      >{{ housedata.ownername }}
                    </div>
                    <div class="housetype">
                      <!--状态不存在0-->
                      <span v-if="housedata.housetype == 1"
                        ><el-icon color="red"><Lock /></el-icon>私有的</span
                      >
                      <span v-if="housedata.housetype == 0"
                        ><el-icon color="green"><Unlock /></el-icon>开源的</span
                      >
                    </div>
                  </div>
                  <div class="houseupdatetime">
                    <el-icon><Timer /></el-icon> 最新更新时间
                    {{
                      housedata.updatetime.slice(5, 10) +
                      " " +
                      housedata.updatetime.slice(11, 16)
                    }}
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <!-- <div v-if="searchtype == 2">
            <div class="showissue">
              <div v-for="issue in issues" @click="viewissue(issue)">
                <div class="eachissue">
                  <el-card
                    shadow="hover"
                    style="cursor: pointer"
                    class="issuecard"
                  >
                    <div class="name" style="font-weight: 700">
                      {{ issue.issueName }}
                    </div>
                    <div class="information">
                      <span class="creatorstate">
                        <div class="creator">
                          <el-icon><UserFilled /></el-icon
                          >{{ issue.issueCreatorName }}
                        </div>
                        <div class="state">
                          <el-icon><InfoFilled /></el-icon>
                          <div v-if="issue.issueState == 1">代办的</div>
                          <div v-if="issue.issueState == 2">进行中</div>
                          <div v-if="issue.issueState == 3">已完成</div>
                          <div v-if="issue.issueState == 4">已拒绝</div>
                        </div>
                      </span>
                      <span class="updatetime"
                        ><el-icon><Timer /></el-icon> 最新更新时间
                        {{ issue.issueUpdateTime }}</span
                      >
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div> -->
        </div>

        <div class="showpager">
          <el-pagination
            v-if="housedatas.length != 0"
            layout="prev, pager,
              next,jumper"
            :page-size="pageSize"
            pager-count="5"
            :total="total"
            :current-Page="currentPage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
      <el-aside>
        <div class="picdiv">
          <img src="..\assets\boy.jpg" class="pic" />
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import SysHeader from "@/components/SysHeader.vue";
import request from "@/utils/request";
export default {
  name: "Search",
  components: { SysHeader },
  data() {
    return {
      total: 12,
      currentPage: 1,
      pageSize: 5,
      searchtype: "1",
      what: this.$route.params.input,
      housedatas: [],
      hotIssues: [],
    };
  },
  mounted() {
    request.get("/issue/gethotissue?num=6").then((res) => {
      if (res.code == 200) {
        this.hotIssues = res.data;
        console.log(res);
      }
    });
    this.what = this.$route.params.input;
    if (this.what == 0) {
      this.what = "";
    }
    this.handlesearch();
  },
  methods: {
    toHouse(e) {
      this.$router.push(
        "/HouseHomePage/" +
          e.house.ownername +
          "/" +
          e.house.housename +
          "/housecode"
      );
    },
    viewhouse(housedata) {
      console.log("访问仓库" + housedata.housename);
      this.$router.push(
        "/HouseHomePage/" +
          housedata.ownername +
          "/" +
          housedata.housename +
          "/housecode"
      );
    },
    viewissue(issue) {
      console.log("访问工单" + issue.issueName);
      request
        .get("/house/getbyid?houseid=" + issue.connectHouseId)
        .then((res) => {
          if (res.code == 200) {
            this.$router.push(
              "/HouseHomePage/" +
                res.data.ownername +
                "/" +
                res.data.housename +
                "/viewIssue/" +
                issue.issueId
            );
          } else {
            console.log("访问工单失败");
          }
        })
        .catch((error) => {
          console.log("访问工单失败");
        });
    },
    selecttype(index) {
      this.searchtype = index;
      // this.handlesearch();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handlesearch();
    },
    handlesearch() {
      this.housedatas = [];
      console.log("search:   " + this.what);
      request
        .get(
          "/find/all?searchtype=" +
            this.searchtype +
            "&what=" +
            this.what +
            "&currentpage=" +
            this.currentPage +
            "&housetype=" +
            this.searchtype
        )
        .then((res) => {
          if (res.code == 200) {
            if (this.searchtype == 1) {
              this.housedatas = res.data.records;
              this.total = res.data.total;
            } else {
              this.issues = res.data.records;
              this.total = res.data.total;
            }
          } else {
            console.log("搜索失败");
          }
        })
        .catch((error) => {
          console.log("搜索失败");
        });
      this.$router.push("/search/" + this.what);
    },
  },
};
</script>

<style scoped>
.searchdiv {
  margin-left: 5%;
  margin-top: 3%;
}
.searchtype {
  margin-top: 3%;
  width: 250px;
  background-color: white;
  text-color: black;
  border: 1px solid grey;
  border-radius: 5px;
}
.searchhouse {
  border-bottom: 1px solid grey;
}
.searchissue {
}
.searchinputdiv {
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 2px solid gray;
  border-top: 2px solid gray;
  display: flex;
  justify-content: space-between;
}
.searchmain {
  margin-top: 0;
}
.searchinput {
  width: 600px;
  height: 40px;
}
#searchbutton {
  left: 0px;
  top: 5px;
  cursor: pointer;
}
#searchbutton:hover {
  color: blue;
}
.showissue {
  margin-top: 10px;
}
.information {
  justify-content: space-between;
  display: flex;
}
.name {
  margin: 0;
}
.creatorstate {
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
  width: 200px;
}
.creator {
  justify-content: space-between;
  display: flex;
  font-size: small;
}
.state {
  justify-content: space-between;
  display: flex;
  font-size: small;
}
.Label {
  display: flex;
}
.updatetime {
  justify-content: space-between;
  display: flex;
  font-size: small;
  margin-top: 20px;
}

.houseshowdiv {
  margin-top: 10px;
}
.informationhouse {
  justify-content: space-between;
  display: flex;
}
.creatortype {
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
  width: 180px;
}
.housecreator {
  justify-content: space-between;
  display: flex;
  font-size: 15px;
}
.housetypes {
  justify-content: space-between;
  display: flex;
  font-size: 15px;
}
.houseupdatetime {
  display: flex;
  font-size: 15px;
  margin-top: 21px;
}
.housecarddiv {
  border-radius: 25px;
}
.housecard {
  width: auto;
  height: 100px;
}
.housecard:hover {
  color: coral;
}
.issuecard {
}
.issuecard:hover {
  color: coral;
}
.showpager {
  margin-top: 10px;
  justify-content: center;
  display: flex;
}
.el-carousel__item {
  background: #ff0000c5;
}
.el-carousel__item:hover {
  cursor: pointer;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.picdiv {
  overflow: hidden;
}
.pic {
  transform: rotateY(180deg);
  height: 50%;
  margin-left: -50px;
  overflow: hidden;
}
.hotIssueCard {
  margin: 2px;
  height: 244px;
  border-radius: 10px;
}

.hotIssueCard:hover {
  background-color: #fcf0bc;
}
</style>
